<template>
  <div class="UserManagementList">
    <el-card class="searchBox">
      <div class="one">
        <el-input
          v-model="id"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <!-- <el-input v-model="name" placeholder="请输入昵称"></el-input> -->
        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
        <!-- <el-select v-model="stateVal" placeholder="请选择审核类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <el-date-picker
          v-model="dataTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" @click="reviewDataReviewListBtn"
          >查询搜索</el-button
        >
      </div>
      <div class="two" style="margin-bottom: 0">
        <!-- <p :class="{ active: index == 2 }" @click="activeStatusB()">
          未审核:{{ notReviewed }}
        </p>
        <p :class="{ active: index == 1 }" @click="activeStatusA()">
          已审核:{{ reviewed }}
        </p> -->
        <el-radio-group
          v-model="index"
          size="medium"
          fill="#6490d5"
          @change="typeChange"
        >
          <el-radio-button label="0">未审核{{ notReviewed }}</el-radio-button>
          <el-radio-button label="1">已审核</el-radio-button>
        </el-radio-group>
      </div>
      <div class="two">
        <!-- <p :class="{ active: index1 == 1 }" @click="activeStatusC()">
          私密图片
        </p>
        <p :class="{ active: index1 == 2 }" @click="activeStatusD()">
          私密视频
        </p>
        <p :class="{ active: index1 == 3 }" @click="activeStatusE()">
          语音标签
        </p> -->
        <el-radio-group
          v-model="index1"
          size="medium"
          fill="#6490d5"
          @change="typeChange"
        >
          <el-radio-button label="1">私密图片</el-radio-button>
          <el-radio-button label="2">私密视频</el-radio-button>
          <el-radio-button label="3">语音标签</el-radio-button>
        </el-radio-group>
      </div>

      <!-- 已审核 -->
      <div v-if="this.index == '1'">
        <el-table :data="tableData" v-loading="loading" style="width: 100%">
          <el-table-column type="selection" width="55" v-if="this.index == '0'">
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.state == 0
                  ? "待审核"
                  : scope.row.state == 1
                  ? "通过"
                  : "禁止"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="用户ID"> </el-table-column>
          <el-table-column prop="creationTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="submissionType" label="提交类型">
          </el-table-column>
          <el-table-column
            prop="submissionType"
            label="内容"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- <img
                v-if="scope.row.submissionType == '图片'"
                :src="scope.row.content"
                class="img"
                preview
              /> -->
              <el-image
                v-if="scope.row.submissionType == '图片'"
                class="img"
                :src="scope.row.content"
                :preview-src-list="[scope.row.content]"
              >
              </el-image>
              <!-- <img
                v-if="scope.row.submissionType == 2"
                :src="scope.row.content"
                class="img"
                preview
              /> -->
              <a
                v-if="scope.row.submissionType == '视频'"
                :href="scope.row.content"
                target="_blank"
                >{{ scope.row.content }}</a
              >
              <!-- <a
                v-if="scope.row.submissionType == '语音标签'"
                :href="scope.row.content"
                target="_blank"
                >{{ scope.row.content }}</a
              > -->
              <audio
                :src="scope.row.content"
                controls
                v-if="scope.row.submissionType == '语音标签'"
                style="width: 100px"
              ></audio>
              <span v-if="scope.row.submissionType == 3">{{
                scope.row.content
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <!-- 通过拒绝按钮 -->
            <template slot-scope="scope">
              <el-button size="mini" @click="adoptBtn(scope.row)" disabled
                >通过</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="disableBtn(scope.row)"
                disabled
                >禁止</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="" label="用户详情">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="detailsBtn(scope.row)"
                round
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 未审核 -->
      <div v-if="this.index == '0'">
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          ref="multipleTable"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.state == 0
                  ? "待审核"
                  : scope.row.state == 1
                  ? "通过"
                  : "禁止"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="用户ID"> </el-table-column>
          <el-table-column prop="creationTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="submissionType" label="提交类型">
          </el-table-column>
          <el-table-column
            prop="submissionType"
            label="内容"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- <img
                v-if="scope.row.submissionType == '图片'"
                :src="scope.row.content"
                class="img"
                preview
              /> -->
              <el-image
                v-if="scope.row.submissionType == '图片'"
                class="img"
                :src="scope.row.content"
                :preview-src-list="[scope.row.content]"
              >
              </el-image>
              <!-- <img
                v-if="scope.row.submissionType == 2"
                :src="scope.row.content"
                class="img"
                preview
              /> -->
              <a
                v-if="scope.row.submissionType == '视频'"
                :href="scope.row.content"
                target="_blank"
                >{{ scope.row.content }}</a
              >
              <!-- <a
                v-if="scope.row.submissionType == '语音标签'"
                :href="scope.row.content"
                target="_blank"
                >{{ scope.row.content }}</a
              > -->
              <audio
                :src="scope.row.content"
                controls
                v-if="scope.row.submissionType == '语音标签'"
                style="width: 100px"
              ></audio>
              <span v-if="scope.row.submissionType == 3">{{
                scope.row.content
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <!-- 通过拒绝按钮 -->
            <template slot-scope="scope">
              <el-button size="mini" @click="adoptBtn(scope.row)"
                >通过</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="disableBtn(scope.row)"
                >禁止</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="" label="用户详情">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="detailsBtn(scope.row)"
                round
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="BatchPass">批量通过</el-button>
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
      </div>
    </el-card>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  reviewDataReviewList,
  reviewDataReviewBan,
} from "@/api/AuditManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      loadingA: true,
      ids: [],
      index: "0",
      index1: "1",
      input: "",
      id: "",
      name: "",
      phone: "",
      reviewed: "", //已审核
      notReviewed: "", //未审核
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dataTimeValStartDate: "",
      dataTimeValEndDate: "",
      dataTimeVal: "", //时间日期
      options: [
        {
          value: "1",
          label: "图片",
        },
        {
          value: "2",
          label: "头像",
        },
        {
          value: "3",
          label: "昵称",
        },
        {
          value: "4",
          label: "语音标签",
        },
        {
          value: "5",
          label: "视频标签",
        },
        // {
        //   value: "6",
        //   label: "关键词过滤",
        // },
      ],
      multipleSelection: [],
      stateVal: "", //下拉框状态
      tableData: [],
      tableDataA: [],
      tableDataB: [],
      // tableDataY: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      state: 1, //状态 0未审核 1已审核

      // 音频配置
      songInfo: {
        title: "语音标签", //歌曲名称
        artist: "语音标签", //演唱者
        lrc: "", //LRC 歌词或者歌词文件的 URL
        pic: "", //封面图片 URL
        src: "", //音频文件的 URL
      },
    };
  },
  methods: {
    // 批量通过
    BatchPass() {
      if (this.ids.length >= 1) {
        reviewDataReviewBan({
          id: this.ids,
          operaState: "1",
          state: "0",
          type: this.index1,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "批量通过成功",
            });
            this.getList();
          }
        });
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.ids = val.map((item) => item.id);

      console.log(this.ids);
      this.multipleSelection = val;
    },
    //列表
    reviewDataReviewList() {
      this.loading = true;
      reviewDataReviewList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: "",
        endDate: "",
        id: "",
        name: "",
        phone: "",
        state: this.index, //状态 0未审核 1已审核
        type: this.index1,
      }).then((res) => {
        if (res.code == 0) {
          // console.log(this.index);
          if (this.index == "0") {
            this.tableDataY = res.data.list;
            this.reviewed = res.data.reviewed;
            this.notReviewed = res.data.notReviewed;
            this.total = parseInt(res.data.count);
          }
          this.tableData = res.data.list;
          this.reviewed = res.data.reviewed;
          this.notReviewed = res.data.notReviewed;
          this.total = parseInt(res.data.count);
          this.loading = false;

          for (let i = 0; i < this.tableData.length; i++) {
            var src = this.tableData[i];
            this.songInfo.src = src.content;
          }
        }
      });
    },
    //查询
    reviewDataReviewListBtn() {
      this.page = 1;
      this.loading = true;
      reviewDataReviewList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.dataTimeValStartDate,
        endDate: this.dataTimeValEndDate,
        id: this.id,
        name: this.name,
        phone: this.phone,
        state: this.index, //状态 0未审核 1已审核
        type: this.index1,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.reviewed = res.data.reviewed;
          this.notReviewed = res.data.notReviewed;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //通过
    adoptBtn(row) {
      reviewDataReviewBan({
        id: [row.id],
        operaState: "1",
        state: this.index,
        type: this.index1,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: "通过成功",
          });
          this.getList();
        }
      });
    },
    //禁止
    disableBtn(row) {
      reviewDataReviewBan({
        id: [row.id],
        operaState: "2",
        state: this.index,
        type: this.index1,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: "禁止成功",
          });
          this.getList();
        }
      });
    },
    // 查看详情
    detailsBtn(row) {
      this.$router.push({
        path: "/UserManagement/UserDetailsList",
        query: {
          id: row.userId,
        },
      });
    },
    //分页
    getList() {
      this.loading = true;
      reviewDataReviewList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.dataTimeValStartDate,
        endDate: this.dataTimeValEndDate,
        id: this.id,
        name: this.name,
        state: this.index, //状态 0未审核 1已审核
        type: this.index1,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.reviewed = res.data.reviewed;
          this.notReviewed = res.data.notReviewed;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //切换状态
    typeChange() {
      this.page = 1;
      this.loading = true;

      reviewDataReviewList({
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.dataTimeValStartDate,
        endDate: this.dataTimeValEndDate,
        id: this.id,
        name: this.name,
        phone: this.phone,
        state: this.index, //状态 0未审核 1已审核
        type: this.index1,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.reviewed = res.data.reviewed;
          this.notReviewed = res.data.notReviewed;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    // 切换审核
    // 已审核
    // activeStatusA() {
    //   this.index = 1;
    //   this.state = 1;
    //   reviewDataReviewList({
    //     page: this.page,
    //     pageSize: this.pageSize,
    //     startDate: this.dataTimeValStartDate,
    //     endDate: this.dataTimeValEndDate,
    //     id: this.id,
    //     name: this.name,
    //     phone: this.phone,
    //     state: "1", //状态 0未审核 1已审核
    //     type: this.stateVal,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableData = res.data.list;
    //       this.reviewed = res.data.reviewed;
    //       this.notReviewed = res.data.notReviewed;
    //       this.total = parseInt(res.data.count);
    //     }
    //   });
    // },
    // 未审核
    // activeStatusB() {
    //   this.index = 2;
    //   this.state = 0;
    //   this.page = 1;
    //   reviewDataReviewList({
    //     page: this.page,
    //     pageSize: this.pageSize,
    //     startDate: this.dataTimeValStartDate,
    //     endDate: this.dataTimeValEndDate,
    //     id: this.id,
    //     name: this.name,
    //     phone: this.phone,
    //     state: "0", //状态 0未审核 1已审核
    //     type: this.stateVal,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableData = res.data.list;
    //       this.reviewed = res.data.reviewed;
    //       this.notReviewed = res.data.notReviewed;
    //       this.total = parseInt(res.data.count);
    //     }
    //   });
    // },
    activeStatusC() {
      this.index1 = 1;
    },
    activeStatusD() {
      this.index1 = 2;
    },
    activeStatusE() {
      this.index1 = 3;
    },
    //时间
    focus(time) {
      if (!this.dataTimeVal) {
        this.dataTimeVal = [];
      }
      this.dataTimeValStartDate = this.dataTimeVal[0];
      this.dataTimeValEndDate = this.dataTimeVal[1];
    },
  },
  created() {
    this.reviewDataReviewList();
  },
};
</script>

<style lang="less" >
.UserManagementList {
  margin: 30px;
  height: 100%;
  .searchBox {
    .one {
      display: flex;
      margin-bottom: 20px;
      .el-input {
        width: 180px;
        margin-right: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
      .el-button {
        margin-left: 20px;
        height: 40px;
      }
      p {
        margin-right: 10px;
      }
    }
    .two {
      display: flex;
      margin: 20px 0px;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .active {
      background-color: #0079fe;
      color: #fff;
      border-radius: 10px;
    }
  }
  .el-table {
    margin-top: 10px;
    .img {
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }
  }
}
</style>